<template>
    <div class="achievements-wrap" v-wechat="$route.meta.title">
        <div class="achievements-header">
            <van-cell-group>
                <van-cell :value="$t('message.ht-title')" class="title"/>
                <van-cell :value="`${$t('message.cglx')}：${form.contractTypeName}`"/>
            </van-cell-group>
        </div>

        <!-- 签约方 -->
        <div class="achievements-box achievements-form">

            <div class="title-box">
                <h6>{{$t('message.qyf')}}</h6>
            </div>

            <van-cell-group>
                <van-cell :title="$t('message.jia-cg')" :value="form.purchaser"/>
                <van-cell :title="$t('message.yi-gy')" :value="form.supplier"/>
				<van-cell
				v-for="(item,index) in clientList"
				:key="index"
				:title="item.type==1?$t('message.cgs'):item.type==2?$t('message.gys'):''"
				>
				<p>{{item.value}}</p>
				</van-cell>
            </van-cell-group>

        </div>

        <!-- 合同/协议名称 -->
        <div class="achievements-box achievements-form">

            <div class="title-box">
                <h6>{{$t('message.xymc')}}</h6>
            </div>

            <van-cell-group>
                <van-cell :title="$t('message.name')" :value="form.contractTitleCn"/>
                <van-cell v-if="form.contractTitleEn!=='-'" :title="$t('addMsg.ywmc')" :value="form.contractTitleEn"/>
            </van-cell-group>

        </div>

        <!-- 合同协议基本情况 -->
        <div class="achievements-box achievements-form">

            <div class="title-box">
                <h6>{{$t('message.xyjbqk')}}</h6>
            </div>

            <van-cell-group label-width="120">
                <!-- 合同/协议号 -->
                <van-cell :title="$t('message.xyh')" :value="form.contractId"/>
                <!-- 合同/协议期限 -->
                <van-cell class="max-value" :title="$t('message.htqx')" :value="form.executionStartDate"/>
				<!-- 合同/协议金额 -->
				<van-cell :title="$t('message.bz')" :value="form.currencyName"/>
				<!-- 合同/协议金额 -->
                <van-cell :title="$t('message.xyje')" :value="form.amount"/>
                <!-- 折算成万美元 -->
                <van-cell :title="$t('message.zscmy')" :value="form.usd"/>
                <!-- 一年内拟执行成交额 -->
                <van-cell :title="$t('message.ynncjdndje')" :value="form.amountPerYear"/>
                <!-- 合同/协议内容 -->
                <van-cell class="achievements-textarea float-left" :title="$t('message.xynr')" :value="form.content"/>
<!--                <van-cell :title="$t('message.xynr')">-->
<!--                    <template #input>-->
<!--                        {{form.content}}-->
<!--                    </template>-->
<!--                </van-cell>-->
				<down-load :pfileList="cfileList"></down-load>
            </van-cell-group>

        </div>

        <!-- 服务进出口类别、国别（地区） -->
        <div class="achievements-box achievements-form">

            <div class="title-box">
                <h6>{{$t('message.fwcklb')}}</h6>
            </div>

            <van-cell-group>
                <!-- 合同种类 -->
                <van-cell :title="$t('message.htzl')" :value="form.border"/>
				<van-cell v-if="form.border === '境内'||form.border === 'Domestic'" :title="$t('message.gndq')" :value="form.provinceName+'-'+form.cityName"/>
				<van-cell v-if="form.border === '境外'||form.border === 'Overseas'" :title="$t('message.jck')" :value="impExpType"/>
				<van-cell v-if="form.border === '境外'||form.border === 'Overseas'" :title="$t('message.gbdq')" :value="form.region"/>
				<van-cell v-if="form.border === '境外'||form.border === 'Overseas'" :title="$t('lackMsg.zfqysd')" :value="form.attributionProvinceName+'-'+form.attributionCityName"/>
			</van-cell-group>

        </div>

        <!-- 行业领域 -->
        <div class="achievements-box achievements-form">

            <div class="title-box">
                <h6>{{$t('message.hyly')}}</h6>
            </div>

            <van-cell-group>
                <!-- 行业领域 -->
                <van-cell :title="$t('message.hyly')" :value="form.releaseLevel"/>
            </van-cell-group>

        </div>

        <!-- 填表人信息 -->
        <div class="achievements-box achievements-form">

            <div class="title-box">
                <h6>{{$t('message.txrxx')}}</h6>
            </div>

            <van-cell-group>
                <!-- 填表人 -->
                <van-cell :title="$t('message.tbr')" :value="form.filledBy"/>
                <!-- 联系人手机号 -->
                <van-cell :title="$t('message.lxdh')" :value="form.phone"/>
                <!-- 座机号码 -->
                <van-cell :title="$t('message.zjhm')" :value="form.landlineNumber"/>
            </van-cell-group>

        </div>

        <div class="achievements-footer">
            <van-button type="primary" size="large" color="linear-gradient(90deg, #FFB301 0%, #FE8C01 100%)" round @click="routerachTraceDetail" v-if="isShowTrackingetails">
                {{$t('lackMsg.ckzzxq')}}
            </van-button>
            <van-button size="large" round @click="routerHome">{{$t('addMsg.ffsy')}}</van-button>
        </div>

    </div>
</template>

<script>
    let vm = null;
	import buried from "@/utils/buried";
	import downLoad from '@/components/downLoad.vue'
    export default {
        data () {
            return {
                form: {
                    contractTypeName: "-", // 成果类型
                    purchaser: "-", // 甲方
                    supplier: "-", // 乙方
                    contractTitleCn: "-", // 合同/协议中文名称
                    contractTitleEn: "-", // 合同/协议英文名称
                    contractId: "-", // 合同/协议号
                    executionStartDate: "-", // 合同/协议期限
                    amount: "-", // 合同/协议金额
                    usd: "-", // 折算成万美元
                    amountPerYear: "-", // 一年没拟执行成交易
                    content: "-", // 合同/协议内容
                    provinceName: "-", // 合同种类
                    region: "-", // 合同种类
                    releaseLevel: "-", // 行业领域
                    filledBy: "-", // 填表人
                    phone: "-", // 填表人手机号
                    landlineNumber: "-", // 座机号码
                },
				cfileList:[],
				clientList:[],
				impExpType:'',
				tradeType:[],
                isShowTrackingetails: false, // 是否显示最总详情
				jia:'',
				yi:''
            }
        },
        computed: {
            regionType () { // 发布地区列表
                const regionType = this.$store.state.regionType // 获取发布地区列表
                return regionType.map(item => ({
                    text: item.label,
                    value: item.value
                }))
            },
            query () {
                return this.$route.query
            },
            id () {
                return this.query.id
            }
        },
        created () {
          vm = this;
        },
        mounted () {
			buried("M_result_contract", "contract_detail");
            this.getDetailInfo()
			this.tradeType = this.$store.state.tradeType
        },
        filters: {
            dateFormats (date) {
              if (date === ''||date === null) {
                  return ''
              } else{
                  return vm.$moment(date).format('YYYY-MM-DD')
              }
            }
        },
		components:{
			downLoad
		},
        methods: {
            // 根据 ID 获取详情信息
            async getDetailInfo () {
                const res = await this.$axios.get('/api/contract/getContract', { id: this.id })
                const { data } = res
                if (data.code === 200) {
                    this.form = {
                        ...data.data,
                        contractTypeName: data.data.contractTypeName || "-", // 成果类型
                        purchaser: data.data.purchaser || "-", // 甲方
                        supplier: data.data.supplier || "-", // 乙方
                        contractTitleCn: data.data.contractTitleCn || "-", // 合同/协议中文名称
                        contractTitleEn: data.data.contractTitleEn || "-", // 合同/协议英文名称
                        contractId: data.data.contractId || "-", // 合同/协议号
                        executionStartDate: data.data.executionStartDate || "-", // 合同/协议期限
                        amount: data.data.amount, // 合同/协议金额
                        usd: data.data.usd, // 折算成万美元
                        amountPerYear: data.data.amountPerYear, // 一年没拟执行成交易
                        content: data.data.content || "-", // 合同/协议内容
                        provinceName: data.data.provinceName || "-", // 合同种类
                        region: data.data.region || "-", // 合同种类
                        releaseLevel: data.data.releaseLevel || "-", // 行业领域
                        filledBy: data.data.filledBy || "-", // 填表人
                        phone: data.data.phone || "-", // 填表人手机号
                        landlineNumber: data.data.landlineNumber || "-", // 座机号码
                    }
					// alert(this.form.border)
					if (data.data.client !== null){
						this.clientList = JSON.parse(data.data.client);
						this.jia = this.clientList[0].value
						this.yi = this.clientList[1].value
						this.clientList.shift()
						this.clientList.shift()
					}

					if(data.data.ossUrlList!==''){
						this.cfileList = data.data.ossUrlList
					}

					// 进出口
					// console.log(this.$store.state.tradeType)
					this.tradeType.forEach(item=>{
						if(item.value == this.form.impExpType){
							this.impExpType = item.label
						}
					})

                  this.regionType && this.regionType.some(item => {
                        if (item.value === this.form.border) {
                            this.form.border = item.text
                        }
                  })
                  // 显示国家编码
                  this.overseasType && this.overseasType.some(item => {
                      if (data.data.regionCode === item.value) this.form.regionCode = item.text
                      if (data.data.regionCode === 'within') {
                          this.form.border = `${item.text} - ${data.data.provinceName} - ${data.data.cityName}`
                      }
                      else if (data.data.regionCode === '') {
                          this.form.border = `${item.text} - ${data.data.regionName}`
                      }
                      return true
                  })

                  this.form.releaseLevel = data.data.serviceType1Name
                  if (data.data.serviceType1Name&&data.data.serviceType2Name!=="") this.form.releaseLevel += ` - ${data.data.serviceType2Name}`;
                  if (data.data.serviceType2Name&&data.data.serviceType3Name!=="") this.form.releaseLevel += ` - ${data.data.serviceType3Name}`;
                  if (data.data.otherService) this.form.releaseLevel += ` - ${data.data.otherService}`;

                    if (data.data.executionStartDate !== 0 && data.data.executionStartDate !== '' && data.data.executionStartDate !== null) {
                      const executionStartDate = data.data.executionStartDate;
                      const executionEndDate = data.data.executionEndDate;
                      this.form.executionStartDate = this.$moment(executionStartDate).format('YYYY-MM-DD') + '至' + this.$moment(executionEndDate).format('YYYY-MM-DD')
                    } else {
                      this.form.executionStartDate = '';
                    }
                    // 是否显示追踪详情
                    switch (data.data.approvalStatus) {

                        case 'shzt07':
                            this.isShowTrackingetails = true
                            return
                        case 'shzt08':
                            this.isShowTrackingetails = true
                            return
                        case 'shzt09':
                            this.isShowTrackingetails = true
                            return
                        case 'shzt10':
                            this.isShowTrackingetails = true
                            return
                        default:
                            this.isShowTrackingetails = false
                            return
                    }
                } else {
                  this.$toast(this.$t('message.hxxxsb'))
                }
            },
            routerachTraceDetail () {
                this.$router.push({
                    path: '/conTraceDetail',
                    query: {
                        id: this.id
                    }
                })
            },
            routerHome () {
                this.$router.push({
                    path: '/home'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .achievements-wrap {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        background: rgba(243, 246, 250, 1);
        padding: 15px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .achievements-box {
        padding: 15px;
        background: #fff;
        margin-top: 18px;
        border-radius: 4px;
    }

    .title-box {
        display: flex;
        align-items: center;
        height: 44px;
        /*line-height: 44px;*/

        h6 {
            font-weight: 500;
            color: rgba(33, 33, 33, 1);
            display: flex;
            align-items: center;

            &:before {
                content: "";
                width: 4px;
                height: 15px;
                margin-right: 6px;
                background: #FE8B01;
                display: inline-block;
                vertical-align: top;
                flex-shrink: 0;
            }
        }
    }

    .achievements-footer {
        padding: 15px;

        .van-button {
            margin-top: 15px;

            &.van-button--default {
                border-color: #CCCFD4;
            }
        }
    }

	// .max-value{
	// 	::v-deep .van-cell__value{
	// 		width: 188px;
	// 	}
	// }
</style>
